<template>
  <div class="app-container" v-loading="loading">
    <p>我报名的监考活动</p>
    <hr />
    <div v-for="(item, index) in items" :key="item.id">
      <div v-if="item.active_status == 'finished'"><img class="statusImg" :src='finishImgUrl'/></div>
      <div v-else-if="item.active_status == 'ended'"><img class="statusImg" :src='endImgUrl'/></div>
      <el-row type="flex" justify="end">
        <el-col :span=24><h4>{{item.active_name}}</h4>
          <p>发布部门：{{item.department_name}}</p>
          <p>报名时间：{{item.signup_date}}
          <p>考试开始时间：{{item.exam_start_date}}</p>
          <p>考试结束时间：{{item.exam_end_date}}</p>
          <p>考务人员类型：{{item.personnel_type}}</p>
          <p>费用标准：{{item.examinationFee}}</p>
          <p>备注：{{item.remark}}</p>
          <span>报名状态：</span>
          <el-tag size="large" type="success" v-if="item.signup_status === '1'">报名成功,遴选中</el-tag>
          <el-tag size="large" type="danger" v-else-if="item.signup_status === '0'">报名取消</el-tag>
          <el-tag size="large" type="success" v-else-if="item.signup_status === '2'">有监考资格</el-tag>
          <el-tag size="large" type="danger" v-else-if="item.signup_status === '3'">无监考资格</el-tag>
          <el-tag size="large" type="info" v-else>其他</el-tag>
          <el-dialog title="" :visible.sync="dialogFormVisible" :fullscreen="true">
            <div v-if="isArranged">
              <el-row type="flex" justify="center" >
                <el-col :span="20">
                  <center><h2>{{examArrange.personnel_type}}通知</h2></center>
                </el-col>
              </el-row>
              <el-row type="flex" justify="center" >
                <el-col :span="20">
                  <span style="font-weight:bold">{{item.signup_teacher_name}} 老师：</span>
                </el-col>
              </el-row>
              <el-row type="flex" justify="center" >
                <el-col :span="20">
                  <p>&nbsp;&nbsp;&nbsp;&nbsp;{{examArrangeTable.exam_name}}定于{{examArrangeTable.exam_time}}举行，现邀请您担任本次考试{{examArrangeTable.exam_arrange_note}}的{{examArrange.personnel_type}}工作。请收到本通知后仔细阅读相关内容：</p>
                </el-col>
              </el-row>
              <el-row type="flex" justify="center" >
                <el-col :span="20">
                    <center>
                      <table>
                        <tr>
                          <th style="width:280px">报到时间</th>
                          <th style="width:340px">报到地点</th>
                        </tr>
                        <tr>
                          <th>{{examArrangeTable.train_time}}</th>
                          <th>{{examArrangeTable.train_address}}</th>
                        </tr>
                      </table>
                    </center>
                </el-col>
              </el-row>
              <el-row type="flex" justify="center" >
                <el-col :span="20">
                  <p style="font-weight:bold;font-size:14px">请您在{{examArrange.personnel_type}}前做好以下准备：</p>
                  <p>1.请认真阅读《考务手册》，并按要求完成监考工作；</p>
                  <p>2.考试期间，须携带本人有效居民身份证和手表，严禁携带规定以外的的物品进入考场；</p>
                  <p>3.考试期间请穿软底鞋，以保持考场安静；</p>
                  <p>4.监考当天，请凭本人有效居民身份证、《考务手册》和本《{{examArrange.personnel_type}}通知》进入所属考区。</p>
                </el-col>
              </el-row>
              <el-row type="flex" justify="center">
                <el-col :span="20">
                  <center><p style="font-family:KaiTi;font-size:18px;font-weight:bold">感谢您对招生工作的大力支持！</p></center>
                </el-col>
              </el-row>
              <el-row type="flex" justify="center">
                <el-col :span="20">
                  <div v-if="examArrange.confirm_examarrange == '1'">
                    <center><el-button type="success" icon="el-icon-success">您已确认监考安排</el-button></center>
                  </div>
                  <div v-else>
                    <center><el-checkbox v-model="checkExamArrange">本人已阅读{{examArrange.personnel_type}}安排</el-checkbox></center><br>
                    <center><el-button type="primary" @click="submitConfirmExamArrange()">确认</el-button></center>
                  </div>
                  <br>
                  <p align="right">上海财经大学研究生招生办公室</p>
                  <p align="right">{{formatDate(examArrangeTable.exam_arrange_time)}}</p>
                </el-col>
              </el-row>
              <el-row type="flex" justify="center">
                <el-col :span="20">
                  <center><el-button type=text icon="el-icon-printer" @click="print" id="button">打印</el-button></center>
                </el-col>
              </el-row>
              <hr>考务附件下载
              <el-row type="flex" justify="center">
                <el-col :span="20">
                  <div class="upload_warp_img" v-show="attachedLists.length!=0" id="attachedList">
                  <div class="upload_warp_img_div" v-for="(itemList)  of attachedLists" :key="itemList.name">
                    <div class="upload_warp_img_div_top">
                      <div class="upload_warp_img_div_text" >
                        {{itemList.name.split('.')[0].split('_')[0]}}
                      </div>
                    </div>
                    <a :href="getDownloadUrl(itemList.name)" > <img :src="itemList.src"></a>
                  </div>
                </div>
                </el-col>
              </el-row>
            </div>
            <div v-else>
              <el-row type="flex" justify="center">
                <el-col :span=24>
                  <center><h3>考试安排尚未出来，请耐心等待</h3></center>
                </el-col>
              </el-row>
            </div>
          </el-dialog>
          <el-dialog title="培训安排确认" :visible.sync="trainNoticeDialog" width="80%">
            <div v-if="isTrainNoticed">
              <el-row type="flex" justify="center">
                <el-col :span="20">
                  <center>
                    <h3>培训安排</h3>
                  </center>
                  <!--<span>{{trainNotice.train_notice}}</span> -->
                  <div v-html="trainNotice.train_notice"></div>
                  <br>
                  <br>
                  <br>
                  <br>
                  <div v-if="trainNotice.confirm_train == 1">
                    <center><el-button type="success" icon="el-icon-success">您已确认培训安排</el-button></center>
                  </div>
                  <div v-else>
                    <center><el-checkbox v-model="confirmTrainNotice">本人已阅读培训安排并确认参加</el-checkbox></center><br>
                    <center><el-button type="primary" @click="submitConfirmTrainNotice(index)">确认</el-button></center>
                  </div>
                  <br>
                  <br>
                  <p align="right">上海财经大学研究生招生办公室</p>
                  <p align="right">{{formatDate(trainNotice.train_test_time)}}</p>
                </el-col>
              </el-row>
            </div>
            <div v-else>
              <center><h3>培训安排尚未发出，请耐心等待</h3></center>
            </div>
          </el-dialog>
         <center v-if="item.signup_status == 2">
           <el-button v-if="item.create_role_id == 5" type="primary" @click="showTrainArrangement(index)" :disabled="item.ifActiveFinished">确认培训安排</el-button>
           <el-button type="primary" @click="showExaminationArrangement(index)" :disabled="item.ifActiveFinished">确认监考安排</el-button>
         </center>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24"><span><hr></span></el-col>
      </el-row>
    </div>
    <div style="text-align:center" v-if="items.length > 0">已到底线</div>
    <div style="text-align:center" v-else>暂无已报名的监考活动</div>
  </div>
</template>

<script>
import { mySignupActive, confirmTrain, confirmExamArrange } from '@/api/activePublish'
import { mapGetters } from 'vuex'
import { parseTime } from '@/utils'
import axios from 'axios'
export default {
  name: 'queryActive',
  data() {
    return {
      form: {
        active_name: 'dddd',
        signup_start_date: '2018-12-01 9:00',
        signup_end_date: '2018-12-01 9:00',
        exam_start_date: '',
        exam_end_date: '',
        personnel_type: '监考',
        remark: '',
        department_code: '',
        numOfPeaple: '',
        examinationFee: '600/天',
        imglist: [{ name: 'ExcelTest.xls', src: '/src/icons/Excel.png' }]
      },
      examArrangeTable: {
        exam_name: '',
        train_time: '',
        train_address: '',
        exam_time: '2019年12月22-23日',
        exam_arrange_time: '2019-12-18',
        exam_arrange_note: '',
        create_role_id: ''
      },
      finishImgUrl: './static/icons/finished.png',
      endImgUrl: './static/icons/end.png',
      currentyear: '',
      items: [],
      loading: false,
      signup: '立即报名',
      canSignup: true,
      dialogFormVisible: false,
      trainNoticeDialog: false,
      confirmTrainNotice: false,
      checkExamArrange: false,
      trainNotice: {
        train_notice: '',
        confirm_train: '',
        train_test_time: ''
      },
      attachedLists: [],
      examArrange: {
        confirm_examarrange: '0',
        personnel_type: ''
      },
      signupInfo_id: '',
      isArranged: false,
      isTrainNoticed: false
    }
  },
  computed: {
    ...mapGetters([
      'name',
      'roles',
      'teacherTypeCode'
    ])
  },
  mounted: function() {
    this.fetchMySignupInfo()
  },
  methods: {
    transferToBoolean: function(val) {
      if (val === 'true') {
        return true
      } else {
        return false
      }
    },
    fetchMySignupInfo: function() {
      const that = this
      that.loading = true
      mySignupActive(that.name).then(response => {
        if (response.exception) {
          that.processing = false
          that.$message.error(response.exception.message)
          return
        }
        const data = response.result
        that.items = []
        for (let i = 0; i < data.length; i++) {
          let fileList = []
          if (data[i]['FILEPATH'] !== null) {
            fileList = data[i]['FILEPATH'].split(',')
          }
          const imgList = []
          for (let i = 0; i < fileList.length; i++) {
            const fileExtension = fileList[i].split('.')[1]
            let imgUrl = ''
            if (fileExtension === 'xls' || fileExtension === 'xlsx') {
              imgUrl = './static/icons/Excel.png'
            } else if (fileExtension === 'doc' || fileExtension === 'docx') {
              imgUrl = './static/icons/word.png'
            } else {
              imgUrl = './static/icons/pdf.png'
            }
            imgList.push({ name: fileList[i], src: imgUrl })
          }
          const curTime = new Date()
          let active_status = ''
          let ifActiveFinished = true
          if (new Date(Date.parse(data[i]['EXAMENDTIME'])) < curTime) {
            if (data[i]['SIGNUPSTATUS'] === '1' || data[i]['SIGNUPSTATUS'] === '2') {
              active_status = 'finished'
            } else {
              active_status = 'ended'
            }
          } else {
            active_status = 'notStart'
            ifActiveFinished = false
          }
          that.items.push({ id: data[i]['ID'], active_id: data[i]['ACTIVE_ID'],
            active_name: data[i]['ACTIVENAME'],
            exam_name: data[i]['EXAM_NAME'],
            active_status: active_status,
            ifActiveFinished: ifActiveFinished,
            signup_date: parseTime(new Date(Date.parse(data[i]['SIGNUPTIME'].replace(/-/g, '/')))),
            signup_end_date: parseTime(new Date(Date.parse(data[i]['SIGNUPENDTIME'].replace(/-/g, '/')))),
            exam_start_date: parseTime(new Date(Date.parse(data[i]['EXAMSTARTTIME'].replace(/-/g, '/')))),
            exam_end_date: parseTime(new Date(Date.parse(data[i]['EXAMENDTIME'].replace(/-/g, '/')))),
            personnel_type: data[i]['PERSONNELTYPENAME'],
            remark: data[i]['REMARK'],
            department_name: data[i]['DEPARTMENTNAME'],
            numOfPeaple: data[i]['NUMOFPEAPLE'],
            examinationFee: data[i]['EXAMINATIONFEE'],
            patrol_group_no: data[i]['PATROL_GROUP_NO'],
            examination_room_no: data[i]['EXAMINATION_ROOM_NO'],
            classroom: data[i]['CLASSROOM'],
            invigilate_start_time: data[i]['INVIGILATE_START_TIME'],
            invigilate_end_time: data[i]['INVIGILATE_END_TIME'],
            register_time: data[i]['REGISTER_TIME'],
            train_time: data[i]['TRAIN_TIME'],
            train_address: data[i]['TRAIN_ADDRESS'],
            signup_status: data[i]['SIGNUPSTATUS'],
            is_traintest_pass: data[i]['IS_TRAINTEST_PASS'],
            train_test_time: data[i]['TRAIN_TEST_TIME'],
            train_notice: data[i]['TRAIN_NOTICE'],
            confirm_train: data[i]['CONFIRM_TRAIN'],
            confirm_examarrange: data[i]['CONFIRM_EXAMARRANGE'],
            signup_teacher_name: data[i]['SIGNUP_TEACHER_NAME'],
            create_role_id: data[i]['CREATE_ROLE_ID'],
            examArrange_import_Date: data[i]['IMPORT_DATE'],
            imglist: imgList
          })
        }
        that.loading = false
      }).catch(error => {
        console.log(error)
        that.loading = false
        that.$message.error('获取数据失败...')
      })
    },
    getDownloadUrl(val) {
      return '/api/download/examinationActiveFiles?fileName=' + val
    },
    downloadFile(fileName) {
      const formData = new FormData()
      formData.append('fileName', fileName)
      axios.get('/api/download').then(response => {

      }).catch(message => {
        console.log(message)
        this.$message.error('文件下载失败')
      })
    },
    showExaminationArrangement(index) {
      this.signupInfo_id = this.items[index].id
      this.dialogFormVisible = true
      // console.log(this.items[index].confirm_examarrange)
      this.examArrange.confirm_examarrange = this.items[index].confirm_examarrange
      this.examArrange.personnel_type = this.items[index].personnel_type
      this.attachedLists = this.items[index].imglist
      if (typeof (this.items[index].invigilate_start_time) !== 'undefined' && this.items[index].invigilate_start_time !== null) {
        this.isArranged = true
        // this.examArrangeTable = []
        this.examArrangeTable.exam_name = this.items[index].exam_name
        this.examArrangeTable.train_time = this.items[index].train_time
        this.examArrangeTable.train_address = this.items[index].train_address
        this.examArrangeTable.exam_time = this.items[index].invigilate_start_time
        this.examArrangeTable.exam_arrange_time = this.items[index].examArrange_import_Date
        // this.examArrangeTable.exam_arrange_time = this.items[index].train_test_time
        const regex1 = /\((.+?)\)/g
        const regex2 = /\（(.+?)\）/g
        if (this.items[index].active_name.match(regex1) !== null) {
          this.examArrangeTable.exam_arrange_note = this.items[index].active_name.match(regex1)[0]
        } else if (this.items[index].active_name.match(regex2) !== null) {
          this.examArrangeTable.exam_arrange_note = this.items[index].active_name.match(regex2)[0]
          console.log(this.examArrangeTable.exam_arrange_note)
        } else {
          this.examArrangeTable.exam_arrange_note = ' '
        }

        // this.examArrangeTable.push({ train_time: this.items[index].train_time, train_address: this.items[index].train_address })
      } else {
        this.isArranged = false
      }
    },
    showTrainArrangement(index) {
      this.trainNoticeDialog = true
      this.trainNotice.train_notice = this.items[index].train_notice
      this.trainNotice.confirm_train = this.items[index].confirm_train
      this.trainNotice.train_test_time = this.items[index].train_test_time
      this.signupInfo_id = this.items[index].id
      if (this.items[index].train_notice !== 'undefined' && this.items[index].train_notice !== null) {
        this.isTrainNoticed = true
      } else {
        this.isTrainNoticed = false
      }
    },
    submitConfirmTrainNotice() {
      const param = {
        'signupInfo_id': this.signupInfo_id
      }
      if (!this.confirmTrainNotice) {
        this.$message.error('请确认已阅读培训安排')
        return
      }
      confirmTrain(param.signupInfo_id).then(response => {
        this.trainNotice.confirm_train = response.confirm_train
        this.fetchMySignupInfo()
      }).catch(error => {
        console.log(error)
        this.$message.error('确认培训安排失败，请稍后重试')
      })
    },
    submitConfirmExamArrange() {
      const param = {
        'signupInfo_id': this.signupInfo_id
      }
      if (!this.checkExamArrange) {
        this.$message.error('请确认已阅读监考安排')
        return
      }
      confirmExamArrange(param.signupInfo_id).then(response => {
        this.fetchMySignupInfo()
        this.examArrange.confirm_examarrange = response.confirm_examarrange
      }).catch(error => {
        console.log(error)
        this.$message.error('确认监考安排失败，请稍后重试')
      })
    },
    formatDate: function(datetimeStr) {
      const date = new Date(Date.parse(datetimeStr))
      const y = date.getFullYear()
      let m = date.getMonth() + 1
      m = m < 10 ? ('0' + m) : m
      let d = date.getDate()
      d = d < 10 ? ('0' + d) : d
      return y + '-' + m + '-' + d
    },
    print: function() {
      window.print()
    }

  }
}
</script>

<style scoped>
.tag{
  text-align: center;
  vertical-align: right
}
.upload_warp_img_div img {
  max-width: 100%;
  max-height: 100%;
  vertical-align: middle;
}
.upload_warp_img_div {
  position: relative;
  height: 100px;
  width: 120px;
  border: 1px solid #ccc;
  margin: 0px 30px 10px 0px;
  float: left;
  line-height: 100px;
  display: table-cell;
  text-align: center;
  background-color: #eee;
  cursor: pointer;
}
.upload_warp_img_div_top {
  position: absolute;
  top: 0;
  width: 100%;
  height: 30px;
  background-color: rgba(0, 0, 0, 0.4);
  line-height: 30px;
  text-align: left;
  color: #fff;
  font-size: 12px;
  text-indent: 4px;
}
.upload_warp_img_div_text {
  white-space: nowrap;
  width: 80%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.upload_warp_img_div_del {
  position: absolute;
  top: 6px;
  width: 16px;
  right: 4px;
}
.upload_warp_img {
  border-top: 0px solid #D2D2D2;
  padding: 14px 0 0 14px;
  overflow: hidden
}
table {
  border-collapse: collapse;
  width: 620px
}
table,td,th {
  border: 1px solid
}
th {
  height: 50px;
}
.statusImg {
  position: absolute;
  right: 0px;
  width: 79px;
  height: 78px;
}
</style>
